<template>
  <div class="inside-page">
    <div class="com" style="min-height: 120px">
      <Search :keywords="keywords" @toSearch="toSearch" />
    </div>
    <div class="job content">
      <div class="com" style="min-height: 355px">
        <Filters :filter="filter" @toFilter="toFilter" @toLocat="toLocat" @toRange="toRange" />
      </div>
      <div class="job-filter">
        <p
          class="job-filter-item"
          v-for="v in jobFilterList"
          :key="v.id"
          :class="[v.active && 'active']"
          @click="jobFilter(v)"
        >
          {{ v.text }}
        </p>
      </div>
      <div class="com" style="min-height: 400px">
        <Pos-Job :list="jobList" />
        <client-only>
          <el-pagination
            hide-on-single-page
            background
            prev-text="上一页"
            next-text="下一页"
            layout="prev, pager, next"
            :current-page="pageNo"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
          />
        </client-only>
      </div>
    </div>
  </div>
</template>

<script>
import { getJobList } from '@/api/company';

export default {
  asyncData ({ params, error }) {
  },
  components: {},
  data () {
    return {
      cityid: '',
      is_all: '',
      eid: '',
      posttypeid: '',
      attrid: '',
      industryid: '',
      sort: 1,
      keywords: '',
      total: 0,
      pageNo: 1,
      pageSize: 10,
      filter: {},
      jobFilterList: [
        { id: 'jobfilter1', text: '默认排序', value: 1, active: true },
        { id: 'jobfilter2', text: '新职位优先', value: 2, active: false },
        { id: 'jobfilter3', text: '高薪优先', value: 3, active: false },
        { id: 'jobfilter4', text: '受欢迎优先', value: 4, active: false },
      ],
      jobList: [],
      province: '',
      city: '',
      range: [0, 51]
    }
  },
  watch: {
    '$route' (val) {
      if (val && val.query && val.query.word) {
        if (this.keywords !== val.query.word) {
          this.keywords = val.query.word;
          this.fetchData();
        }
      }
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.keywords = this.$route.query.word || '';
    this.fetchData();
  },
  mounted () {
  },
  computed: {

  },
  methods: {
    toSearch (data) { // 搜索关键词
      this.keywords = data || '';
      this.pageNo = 1;
      this.fetchData();
    },
    toRange (data) { // 薪资范围
      this.range = data || [0, 51];
      this.fetchData();
    },
    toLocat(p) {
      this.province = p[0];
      this.city = p[1];
      this.fetchData();
    },
    toFilter ({ id, key }) { // 点击搜索
      this[`${key}`] = id;
      this.pageNo = 1;
      this.fetchData();
    },
    jobFilter (obj) { // 点击排序搜索
      this.sort = obj.value;
      this.jobFilterList = this.jobFilterList.map(s => {
        s.value === obj.value
          ? s.active = true
          : s.active = false;
        return s;
      })
      this.pageNo = 1;
      this.fetchData();
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.fetchData();
    },
    async fetchData () {
      await getJobList({
        cityid: this.cityid,
        is_all: this.is_all,
        eid: this.eid,
        posttypeid: this.posttypeid,
        attrid: this.attrid,
        industryid: this.industryid,
        sort: this.sort,
        keywords: this.keywords,
        page: this.pageNo,
        province: this.province,
        city: this.city,
        min: this.range[0],
        max: this.range[1],
      }).then(res => {
        if (res.code === 200) {
          this.total = res.data.count || 0;
          this.jobList = res.data ? res.data.data : [];
          this.filter = res.data ? res.data.search : {};
        } else {
          this.$message.error(res.msg)
        }
      }).catch(err => {
        this.$message.error(err || '网络错误, 稍后再试！');
      })
    },
    jumpTo (obj) {
      this.$router.push({
        path: '/job/detail',
        query: { id: obj.id }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .job-filter {
    position: relative;
    height: 50px;
    width: 100%;
    padding: 15px;
    background: #f6f7f8;
    .job-filter-item {
      font-size: 14px;
      display: inline-block;
      margin: 0 10px 0 20px;
      padding: 1px 5px;
      color: #666;
      cursor: pointer;
      &:hover,
      &.active {
        background: $base-color;
        color: #fff;
      }
    }
  }
}
</style>
